import { useState, forwardRef, useImperativeHandle } from "react";
import styles from "./index.module.less";
import { IconEmail, IconGithub, IconGoogle } from "@arco-design/web-react/icon";
import feishuIcon from "@/assets/img/feishu.svg";
import LoginApi from "@/api/user/login-api.ts";

// 统一的一个方法根据类型判断
const handleLogin = (type: string) => {
  switch (type) {
    case "test":
      LoginApi.loginTest().then(() => {});
      break;
    default:
      window.location.href = `/api/oauth/render/${type}`;
      break;
  }
};

const LoginDialog = forwardRef((_props: any, ref) => {
  const [pageState, setPageState] = useState(false);

  useImperativeHandle(ref, () => {
    return {
      getPage,
      hidePage,
    };
  });

  const getPage = () => {
    setPageState(true);
  };

  const hidePage = (e: any) => {
    e.stopPropagation();
    setPageState(false);
  };

  return pageState ? (
    <div className={styles.loginDialogWarp} onClick={(e) => hidePage(e)}>
      <div className="loginDialog" onClick={(e) => e.stopPropagation()}>
        <div className="loginDialog-title">欢迎登录,FlexUI</div>
        <div className="loginDialog-content">
          <div className="loginMethod">
            <div
              className="loginButton btn-bule "
              onClick={() => handleLogin("feishu")}
            >
              <img className="loginIcon" src={feishuIcon} alt="" />
              通过飞书登录
            </div>
            <div
              className="loginButton btn-black"
              onClick={() => handleLogin("github")}
            >
              <IconGithub
                style={{ marginRight: 10, fontSize: 24 }}
              ></IconGithub>
              通过Github登录
            </div>
            <div
              className="loginButton btn-black"
              onClick={() => handleLogin("google")}
            >
              <IconGoogle
                style={{ marginRight: 10, fontSize: 24 }}
              ></IconGoogle>
              通过Google登录
            </div>
            <div
              className="loginButton btn-black"
              onClick={() => handleLogin("test")}
            >
              <IconEmail style={{ marginRight: 10, fontSize: 24 }}></IconEmail>
              测试登录
            </div>
          </div>
        </div>
      </div>
    </div>
  ) : (
    ""
  );
});

export default LoginDialog;
